/***
    结算页面，购物车选中的商品，点击结算，会把选中的商品带到这个页面
*/
<template>
    <div style="text-align:left;">

        <!--收件人信息-->
        <div>

            <el-row>
                <el-col :span="12" style="text-align:left;">
                    收件人信息
                </el-col>
                <el-col :span="12" style="text-align:right;">
                    <el-button type="text" @click="dialogFormVisible = true">新增地址</el-button>
                </el-col>
            </el-row>
            <el-table :data="addressData" style="width: 100%" :show-header="false">
                <el-table-column width="30">
                    <template slot-scope="scope">
                        <el-radio v-model="selectedAddressId" :label="scope.row.id"></el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                <el-table-column prop="phone" label="电话" width="180"></el-table-column>
                <el-table-column prop="address" label="地址"></el-table-column>
                <el-table-column prop="" label="" width="180">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.isDefault" type="danger">默认地址</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="phone" label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="eventEditAddress(scope.row)">修改</el-button>
                        <el-button size="mini" @click="eventDeleteAddress(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--支付方式-->
        <div>
            <h3>支付方式</h3>
            <el-radio v-model="radio" label="1">立即付款</el-radio>
            <el-radio v-model="radio" label="2">货到付款</el-radio>
        </div>

        <!--商品信息-->
        <div>
            <h3>商品清单</h3>
            <el-table :data="productData" style="width: 100%">
                <el-table-column label="图片" width="120">
                    <template slot-scope="scope">
                        <router-link :to="'/product/detail?id=' + scope.row.skuId">
                            <img :src="'http://localhost:5184/' + scope.row.image" style="width:50px;" />
                        </router-link>
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" width="180"></el-table-column>
                <el-table-column prop="number" label="数量"></el-table-column>
                <el-table-column prop="price" label="单价"></el-table-column>
                <el-table-column prop="address" label="小计">
                    <template slot-scope="scope">
                        {{ scope.row.number * scope.row.price }}
                    </template>
                </el-table-column>
            </el-table>
        </div>

        <!--商品金额-->
        <div style="text-align:right;">
            <div>共{{ productCount }}件商品，商品总金额是：￥{{ productAmount }}</div>
            <div>折扣金额：￥0.00</div>
            <div>运行金额：￥0.00</div>
            <div>应付金额：￥39.99</div>
            <div>
                <el-button style="width:200px;color:#fff; 
                font-size:20px;background:red" @click="eventSubmitOrder">提 交 订 单</el-button>
            </div>
        </div>


        <!--弹出框-->
        <div>
            <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label="姓名" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="电话" :label-width="formLabelWidth">
                        <el-input v-model="form.phone" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="地址" :label-width="formLabelWidth">
                        <el-input type="textarea" v-model="form.address" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="" :label-width="formLabelWidth">
                        <el-checkbox v-model="form.isDefault">是否默认</el-checkbox>
                    </el-form-item>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="eventAddressSubmit">确 定</el-button>
                </div>
            </el-dialog>
        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            selectedAddressId:undefined,
            radio: '1',
            addressData: [],
            productData: [],
            dialogFormVisible: false,
            form: {
                name: '',
                phone: '',
                address: '',
                isDefault: false
            },
            formLabelWidth: '120px'
        }
    },
    mounted() {
        let d = this.$route.params.d
        if (d == undefined) {
            this.$router.push('/car/list')
        }
        this.productData = d
        this.onloadAddressData()
    },
    methods: {
        //提交订单按钮事件
        eventSubmitOrder() {

            if(this.selectedAddressId == undefined){
                this.$message.error('请选择收件人地址')
                return
            }

            let a = this.addressData.filter(x=>x.id == this.selectedAddressId)
            //console.log('address:',a);

            let url = 'http://localhost:5184/order/create'
            let data = {
                "memberId": "3fa85f64-5717-4562-b3fc-2c963f66afa6", //会员id
                "orderAmount": this.productAmount,  //订单金额
                "rateAmount": 0, //折扣金额
                "recivedAddress": a[0].address, //收件人地址
                "recivedName": a[0].name, //收件人姓名
                "recivedPhone": a[0].phone, //收件人电话
                "remark": "string", //描述备注
                "details": []   //商品信息列表
            }
            data.details = this.productData
            console.log(url,data);
            this.$http.post(url, data).then(res => {
                this.$message.info(res.data.message)
                if (res.data.code == 200) {
                    //添加订单成功，跳转到支付页面
                }
            })
        },

        //修改地址
        eventEditAddress(row) {

            this.dialogFormVisible = true
            this.form = row
        },

        //删除地址
        eventDeleteAddress(row) {
            let url = 'http://localhost:5184/member/address'
            let data = []
            data.push(row)
            this.$http.delete(url, { data: data }).then(res => {
                if (res.data.code == 200) {
                    this.$message.success(res.data.message) //提示信息
                    this.onloadAddressData() //刷新数据列表
                }
            })
        },

        //显示地址列表
        onloadAddressData() {
            let url = 'http://localhost:5184/member/address'
            this.$http.get(url).then(res => {
                if (res.data.code == 200) {
                    this.addressData = res.data.data
                }
            })
        },

        //弹框地址提交按钮事件
        eventAddressSubmit() {
            let url = 'http://localhost:5184/member/address'
            let data = {
                "memberId": "3fa85f64-5717-4562-b3fc-2c963f66afa6",
                "name": this.form.name,
                "address": this.form.address,
                "phone": this.form.phone,
                "isDefault": this.form.isDefault
            }
            this.$http.post(url, data).then(res => {
                if (res.data.code == 200) {
                    this.$message.success('添加成功')
                    this.dialogFormVisible = false //添加成功，弹出框隐藏

                    this.onloadAddressData()

                    this.form.name = ''
                    this.form.phone = ''
                    this.form.address = ''
                }
            })
        },
    },
    computed: {

        //商品的数量
        productCount() {
            return this.productData.length
        },
        //商品的总金额
        productAmount() {
            let s = 0
            this.productData.forEach(x => {
                s += x.price * x.number
            })
            return s
        }
    }
}
</script>